<template>
  <div>
    <x-header :left-options="{backText: ''}" >上传图片</x-header>
    <div class="ui-body">
      <group>
        <div class="ui-answer-img" id="uploadImg">
          <input type="file" accept="image/*" ref="uploadImg" name="uploadImg"/>
          <img v-if="imgPath" :src="imgPath" style="width: 100%">
        </div>
      </group>
      
      <box gap="0 10px">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" link="BACK" style="margin-top: 40px;">完成</x-button>
          </flexbox-item>
          <flexbox-item v-if="$store.state.descList[$route.params.index]"> 
            <x-button @click.native="delImg"  type="warn" style="margin-top: 40px;">删除</x-button>
          </flexbox-item>
        </flexbox>
      </box>
    </div>
  </div>
</template>

<script>
import { Group, XTextarea, XButton, Box, XHeader, Flexbox, FlexboxItem } from 'vux'
import store from '@/store'
import axios from 'axios'
import weui from '../../static/weui.min.js'
require('es6-promise').polyfill()
var qs = require('qs')

export default {
  store,
  components: {
    Group,
    XTextarea,
    XButton,
    XHeader,
    Box,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      imgPath: this.$store.state.descList[this.$route.params.index] && !this.$route.params.create ? this.$store.state.descList[this.$route.params.index].img : ''
    }
  },
  mounted () {
    let _this = this
    weui.uploader('#uploadImg', {
      url: _this.$store.state.url + '/VoteManage/VoteImageUpload.ashx',
      auto: true,
      type: 'base64',
      fileVal: 'uploadImg',
      compress: {
        quality: 0.5
      },
      onBeforeQueued: function (files) {
        _this.$vux.loading.show({
          text: '上传中...'
        })
        if (['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(this.type) < 0) {
          _this.$vux.toast.text('请上传图片', 'bottom')
          _this.$vux.loading.hide()
          return false
        }
      },
      onQueued: function () {
        _this.upLoadImg(this.base64)
      },
      onBeforeSend: function (data, headers) {
        return false // 阻止文件上传
      },
      onSuccess: function (rs) {
        let data = rs.data
        _this.imgPath = _this.$store.state.imgUrl + data.url
        var descList = _this.$store.state.descList
        _this.$route.params.create ? descList.splice(_this.$route.params.index, 0, {img: _this.imgPath}) : descList.splice(_this.$route.params.index, 1, {img: _this.imgPath})
        _this.$store.commit('updateState', {key: 'descList', value: descList})
        _this.$vux.loading.hide()
      },
      onError: function (err) {
        console.log(this, err)
        _this.$vux.loading.hide()
        _this.$vux.toast.text('请上传失败', 'bottom')
      }
    })
  },
  methods: {
    upLoadImg (Base64) {
      let _this = this
      axios.post(this.$store.state.url + '/VoteManage/VoteImageUpload.ashx', qs.stringify({Base64: Base64}))
      .then((rs) => {
        let data = rs.data
        if (data.code === 200) {
          _this.imgPath = _this.$store.state.imgUrl + data.url
          var descList = _this.$store.state.descList
          _this.$route.params.create ? descList.splice(_this.$route.params.index, 0, {img: _this.imgPath}) : descList.splice(_this.$route.params.index, 1, {img: _this.imgPath})
          _this.$store.commit('updateState', {key: 'descList', value: descList})
        } else {
          this.$vux.toast.text(data.msg, 'bottom')
        }
        _this.$vux.loading.hide()
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
      })
    },
    delImg () {
      var descList = this.$store.state.descList
      descList.splice(this.$route.params.index, 1)
      this.$store.commit('updateState', {key: 'descList', value: descList})
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped src='@/assets/css/uploadImg.css'></style>
